<ion-header>
  <ion-toolbar mode="ios" color="care">
    <ion-buttons>
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button size="small" (click)="createAppointTime()">{{ 'Create' | translate }}</ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button size="small" (click)="deleteTime()">{{ 'Delete' | translate }}</ion-button>
    </ion-buttons>
    <ion-title>{{ 'Listseven' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item detail (click)="selectDate()">
    <ion-label>{{ 'AlreadySetTime' | translate }}</ion-label>
    <ion-text color="medium" slot="end">{{appointDate}}</ion-text>
  </ion-item>

  <ion-item *ngIf="appointDate">
    <ion-button slot="end" color="warning" (click)="onResetOrderList()">{{ 'RESET' | translate }}</ion-button>
  </ion-item>

  <ion-list>
    <ion-item *ngFor="let item of dataList">
      <ion-label>
        <h3>{{ 'From' | translate}} {{item.start_time}}</h3>
        <h3>{{ 'To' | translate}} {{item.end_time}}</h3>
      </ion-label>
      <ion-checkbox slot="start" [(ngModel)]="item.isChecked" (ionChange)="selectList(item)"></ion-checkbox>
    </ion-item>
  </ion-list>
</ion-content>
